<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.keywords" placeholder="订单号、姓名、电话、支付编号" style="width: 227px" clearable></el-input>
      </el-form-item>
      <el-form-item label="起始时间">
				<el-date-picker
          v-model="dataForm.startTime"
          type="datetime"
          value-format = "yyyy-MM-dd HH:mm:ss"
          placeholder="起始时间">
			  </el-date-picker>
			</el-form-item>
			<el-form-item label="结束时间">
				<el-date-picker
          v-model="dataForm.endTime"
          type="datetime"
          value-format = "yyyy-MM-dd HH:mm:ss"
          placeholder="结束时间">
			  </el-date-picker>
			</el-form-item>
      <el-form-item label="用户类型">
				<el-select v-model="dataForm.userTypes" placeholder="用户类型">
					<el-option label="全部" value="0" ></el-option>
					<el-option label="运营商" value="1" ></el-option>
					<el-option label="联盟店" value="2" ></el-option>
          <el-option label="vip会员" value="3" ></el-option>
					<el-option label="普通消费者" value="4" ></el-option>
          <el-option label="普通联盟店" value="5" ></el-option>
					<el-option label="高级联盟店" value="6" ></el-option>
          <el-option label="城市合伙人" value="7" ></el-option>
					<el-option label="联盟店城市合伙人" value="8" ></el-option>
				</el-select>
			</el-form-item>
      <el-form-item label="商品类型">
				<el-select v-model="dataForm.priceTypes" placeholder="商品类型">
					<el-option label="全部" value="" ></el-option>
					<el-option label="兑换商城" value="1" ></el-option>
					<el-option label="福利商城" value="2" ></el-option>
				</el-select>
			</el-form-item>
      <el-form-item label="支付类型">
				<el-select v-model="dataForm.orderTypes" placeholder="支付类型">
					<el-option label="全部" value="" ></el-option>
					<el-option label="已取消" value="0" ></el-option>
					<el-option label="未支付" value="10" ></el-option>
          <el-option label="待发货" value="20" ></el-option>
					<el-option label="已发货" value="30" ></el-option>
          <el-option label="已收货" value="40" ></el-option>
					<el-option label="已完成" value="50" ></el-option>
				</el-select>
			</el-form-item>
      <el-form-item label="订单类型">
        <el-select v-model="dataForm.invoiceType" placeholder="订单类型">
          <el-option label="全部" value=""></el-option>
					<el-option label="普通订单" value="1"></el-option>
					<el-option label="活动抢购订单" value="2"></el-option>
          <el-option label="购物车订单" value="3"></el-option>
					<el-option label="采购订单" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button @click="
          dataForm.keywords = ''
          dataForm.startTime = ''
          dataForm.endTime = ''
          dataForm.userTypes = ''
          dataForm.priceTypes = ''
          dataForm.orderTypes = ''
          dataForm.invoiceType = ''
          getDataList()">重置</el-button>
        <el-button v-if="isAuth('shopping:order:orderExcel')" icon="el-icon-download" type="primary" @click="excel()">导出</el-button>
        <!-- <el-button v-if="isAuth('generator:shoppingorderform:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button> -->
        <!-- <el-button v-if="isAuth('generator:shoppingorderform:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> -->
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      default-expand-all
      style="width: 100%;">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-row v-for="(item,index) in props.row.subOrder" :key="index" :gutter="20">
            <br/>
            <el-col :span="1">
              <el-popover
                placement="right"
                title=""
                trigger="hover">
                <img :src="'http://image.yilianbaihui.cn/consumer/'+item.path+'/'+item.name"/>
                <img slot="reference" :src="'http://image.yilianbaihui.cn/consumer/'+item.path+'/'+item.name" style="max-height: 30px;max-width: 80px">
              </el-popover>
            </el-col>
            <el-col :span="3">
              <a :href="'http://www.yilianbaihui.cn/item_show.html?goodsId='+item.goodsId" target="_blank" class="buttonText">{{item.goodsName}}</a>
            </el-col>
            <el-col :span="3">
              型号:{{item.goodsSerial}}
            </el-col>
            <el-col :span="2">
              {{item.specInfo}}
            </el-col>
            <el-col :span="2">
              数量:{{item.count}}
            </el-col>
            <el-col :span="2">
              类型:{{item.payType === 1 ? '积分购买' : '现金购买'}}
            </el-col>
            <el-col :span="3">
              {{item.payType === 1 ? '消耗券数量:': '赠送券数量:'}}<el-tag>{{item.integral}}</el-tag>
            </el-col>
            <el-col :span="3">
              状态:
              <span v-if="item.state === 1">正常</span>
              <span v-if="item.state === 2" style="color: red">退货中</span>
              <span v-if="item.state === 3" style="color: red">退款中</span>
              <span v-if="item.state === 4" style="color: red">换货中</span>
              <span v-if="item.state === 5" style="color: red">已退货</span>
              <span v-if="item.state === 6" style="color: red">已退款</span>
              <span v-if="item.state === 7" style="color: red">已换货</span>
              <span v-if="item.state === 8" style="color: red">退货失败</span>
              <span v-if="item.state === 9" style="color: red">退款失败</span>
              <span v-if="item.state === 10" style="color: red">换货失败</span>
            </el-col>
            <el-col :span="2">
              <el-button type="text" size="small" v-if="item.deliveryNo !== null" @click="addOrUpdateHandle2(item.cartId, item.deliveryNo)">物流</el-button>
            </el-col>
            <el-col :span="2">
              <span v-if="index === 0">备注:{{item.msg}}</span>
            </el-col>
          </el-row>
        </template>
      </el-table-column>

      <!-- <el-table-column type="expand">
        <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-table :data="props.row.subOrder">
            <el-table-column>
              <template slot-scope="scope">
                <el-popover
                placement="right"
                title=""
                trigger="hover">
                <img :src="'http://image.yilianbaihui.cn/consumer/'+scope.row.path+'/'+scope.row.name"/>
                <img slot="reference" :src="'http://image.yilianbaihui.cn/consumer/'+scope.row.path+'/'+scope.row.name" style="max-height: 30px;max-width: 80px">
                </el-popover>
                <span style="margin-left:20px"><a :href="'http://www.yilianbaihui.cn/goods_'+scope.row.goodsId+'.htm'" target="_blank" class="buttonText">{{scope.row.goodsName}}</a></span>
                <span style="margin-left:80px">型号:{{scope.row.goodsSerial}}</span>
                <span style="margin-left:80px">规格:{{scope.row.specInfo}}</span>
                <span style="margin-left:80px">数量:{{scope.row.count}}</span>
                <span style="margin-left:80px">类型:{{scope.row.priceType === 1 ? '兑换' : '福利'}}</span> -->
                <!-- <span style="float:right; margin-right:50px"><el-tag v-if="scope.row.state === 5 || scope.row.state === 6 || scope.row.state === 7">已售后</el-tag></span> -->
                <!-- <span v-if="props.row.orderStatus === 20 && scope.row.deliveryNo === ''">
                  <el-button style="float: right" type="danger" size="mini" v-if="scope.row.state === 1 || scope.row.state === 9" @click="sonDeliverGoods(scope.row.cartId, props.row.id ,props.row.userId)">发货</el-button>
                </span> -->
                <!-- <el-button style="float: right" type="warning" size="mini" v-if="scope.row.deliveryNo !== ''" @click="updateSonOrder(scope.row.cartId, props.row.id, scope.row.deliveryNo)">修改物流</el-button>
                <el-button style="float: right;margin-right: 20px" type="primary" size="mini" v-if="scope.row.deliveryNo !== ''" @click="sonOrder(scope.row.deliveryNo)">物流</el-button> -->
                <!-- <span style="float: right;margin-rigth:40px">状态:<span v-if="scope.row.state === 1">正常</span>
                                                                <span v-if="scope.row.state === 2">退货中</span>
                                                                <span v-if="scope.row.state === 3">退款中</span>
                                                                <span v-if="scope.row.state === 4">换货中</span>
                                                                <span v-if="scope.row.state === 5">已退货</span>
                                                                <span v-if="scope.row.state === 6">已退款</span>
                                                                <span v-if="scope.row.state === 7">已换货</span>
                                                                <span v-if="scope.row.state === 8">退货失败</span>
                                                                <span v-if="scope.row.state === 9">退款失败</span>
                                                                <span v-if="scope.row.state === 10">换货失败</span>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </template>
      </el-table-column> -->
      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        label="ID">
      </el-table-column>
      <el-table-column
        prop="consigneeName"
        header-align="center"
        align="center"
        label="收货人姓名">
      </el-table-column>
      <el-table-column
        prop="phone"
        header-align="center"
        align="center"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="address"
        header-align="center"
        align="center"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="orderId"
        header-align="center"
        align="center"
        label="订单编号">
      </el-table-column>
      <el-table-column
        prop="payMoney"
        header-align="center"
        align="center"
        label="订单总价">
        <template slot-scope="scope">
          <span>{{scope.row.totalPrice}} 运费:({{scope.row.shipPrice}})</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="priceType"
        header-align="center"
        align="center"
        label="支付类型">
        <template slot-scope="scope">
          <span>{{scope.row.priceType === 1 ? '积分支付' : (scope.row.priceType === 2 ? '现金支付' : '2.6.3版本之前订单')}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="integral"
        header-align="center"
        align="center"
        label="赠送/消耗券">
      </el-table-column>
      <el-table-column
        prop="payTime"
        header-align="center"
        align="center"
        label="支付时间">
      </el-table-column>
      <el-table-column
        prop="orderStatus"
        header-align="center"
        align="center"
        label="订单状态">
        <template slot-scope="scope">
          <span v-if="scope.row.orderStatus == 0">已取消</span>
          <span v-if="scope.row.orderStatus == 10">未支付</span>
          <span v-if="scope.row.orderStatus == 20" style="color: red">待发货</span>
          <span v-if="scope.row.orderStatus == 30">已发货</span>
          <span v-if="scope.row.orderStatus == 40">已收货</span>
          <span v-if="scope.row.orderStatus == 50">已完成</span>
          <span v-if="scope.row.orderStatus == 100">已删除</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="priceType"
        header-align="center"
        align="center"
        label="商品类型">
        <template slot-scope="scope">
          <span v-if="scope.row.priceType == 1">兑换商城</span>
          <span v-if="scope.row.priceType == 2">福利商城</span>
        </template>
      </el-table-column> -->
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id,scope.row.orderType, scope.row.payNo)">订单详情</el-button>
          <!-- <span v-if="scope.row.returnType !== 1 && scope.row.returnStatus !== 3"> -->
            <!-- <span v-if="scope.row.returnType === 1 && scope.row.orderStatus == 20">
              <el-button type="text" size="small" v-if="scope.row.returnStatus === 5 || scope.row.returnStatus === 7" @click="addOrUpdateHandle1(scope.row.id, scope.row.orderId, scope.row.returnType, scope.row.returnStatus)">发货</el-button>
            </span> -->
            <el-button type="text" size="small" v-if="scope.row.orderStatus == 20 && scope.row.subOrder.length > scope.row.issue" @click="addOrUpdateHandle1(scope.row.id, scope.row.orderId, scope.row.returnType, scope.row.returnStatus, scope.row.count, scope.row.userId)">发货</el-button>
            <el-button type="text" size="small" v-if="scope.row.orderStatus == 20 && scope.row.subOrder.length > scope.row.issue && scope.row.retrievalStatus === 0" @click="notifySupplier(scope.row.id)">通知供应商发货</el-button>
            <el-button type="text" size="small" v-if="scope.row.orderStatus == 30 || scope.row.orderStatus == 40 || scope.row.orderStatus == 50" @click="addOrUpdateHandle2(scope.row.id, scope.row.shipCode)">物流</el-button>
            <el-button type="text" size="small" v-if="scope.row.orderStatus == 30" @click="addOrUpdateHandle3(scope.row.id, scope.row.shipCode, scope.row.orderId)">修改物流</el-button>
          <!-- </span> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <!-- 弹窗, 发货 -->
    <delivergoods v-if="delivergoodsVisible" ref="delivergoodsRef" @refreshDataList="getDataList"></delivergoods>
    <!-- 弹窗, 物流 -->
    <logisticsinformation v-if="logisticsinformationVisible" ref="logisticsinformationRef" @refreshDataList="getDataList"></logisticsinformation>
    <!-- 弹窗, 修改物流 -->
    <updatedelivergoods v-if="updatedelivergoodsVisible" ref="updatedelivergoodsRef" @refreshDataList="getDataList"></updatedelivergoods>
    <!-- 弹窗, 子订单物流 -->
    <son-order v-if="sonOrder" ref="sonOrderRef" @refreshDataList="getDataList"></son-order>
    <!-- 弹窗, 修改子订单物流 -->
    <update-son-order v-if="updateSonOrder" ref="updateSonOrderRef" @refreshDataList="getDataList"></update-son-order>
    <son-deliver-goods v-if="sonDeliverGoods" ref="sonDeliverGoodsRef" @refreshDataList="getDataList"></son-deliver-goods>
  </div>
</template>

<script>
  import AddOrUpdate from './shoppingorderform-add-or-update'
  import delivergoods from './delivergoods'
  import logisticsinformation from './logisticsinformation'
  import updatedelivergoods from './updatedelivergoods'
  import updateSonOrder from './update-son-order'
  import sonOrder from './son-order'
  import sonDeliverGoods from './son-delivergoods'
  export default {
    data () {
      return {
        dataForm: {
          keywords: '',
          userTypes: '',
          orderTypes: '',
          priceTypes: '',
          startTime: '',
          endTime: '',
          consigneeName: '',
          invoiceType: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        delivergoodsVisible: false,
        logisticsinformationVisible: false,
        updatedelivergoodsVisible: false
      }
    },
    components: {
      AddOrUpdate,
      delivergoods,
      logisticsinformation,
      updatedelivergoods,
      updateSonOrder,
      sonOrder,
      sonDeliverGoods
    },
    activated () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/shopping/order/queryOrderByCondition'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'keywords': this.dataForm.keywords,
            'userTypes': this.dataForm.userTypes,
            'orderTypes': this.dataForm.orderTypes,
            'priceTypes': this.dataForm.priceTypes,
            'startTime': this.dataForm.startTime,
            'endTime': this.dataForm.endTime,
            'consigneeName': this.dataForm.consigneeName,
            'invoiceType': this.dataForm.invoiceType
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.data.list
            this.totalPage = data.data.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 发货
      addOrUpdateHandle1 (id, orderId, returnType, returnStatus, count, userId) {
        if (count > 0) {
          // this.$message.error('该笔订单中还有未审核的售后订单！')
          this.$message({
            message: '该笔订单中还有未审核的售后订单！',
            type: 'error',
            duration: 1500
          })
          // return false
          this.$router.push({
            path: '/shoppingorderreturn',
            query: {
              orderId: orderId
            }
          })
          return false
        }
        this.delivergoodsVisible = true
        this.$nextTick(() => {
          this.$refs.delivergoodsRef.init(id, orderId, userId)
        })
      },
      // 物流
      addOrUpdateHandle2 (id, shipCode) {
        this.logisticsinformationVisible = true
        this.$nextTick(() => {
          this.$refs.logisticsinformationRef.init(id, shipCode)
        })
      },
      // 修改物流
      addOrUpdateHandle3 (id, shipCode, orderId) {
        this.updatedelivergoodsVisible = true
        this.$nextTick(() => {
          this.$refs.updatedelivergoodsRef.init(id, shipCode, orderId)
        })
      },
      // 子订单发货
      sonDeliverGoods (cardId, id, userId) {
        this.delivergoodsVisible = true
        this.$nextTick(() => {
          this.$refs.sonDeliverGoodsRef.init(cardId, id, userId)
        })
      },
      // 子订单物流信息
      sonOrder (deliveryNo) {
        this.updatedelivergoodsVisible = true
        this.$nextTick(() => {
          this.$refs.sonOrderRef.init(deliveryNo)
        })
      },
      // 修改子订单物流
      updateSonOrder (id, ecId, deliveryNo) {
        this.updatedelivergoodsVisible = true
        this.$nextTick(() => {
          this.$refs.updateSonOrderRef.init(id, ecId, deliveryNo)
        })
      },
      excel () {
        window.location.href = this.$http.adornUrl(`/shopping/order/orderExcel?token=${this.$cookie.get('token')}&orderTypes=${this.dataForm.orderTypes}&startTime=${this.dataForm.startTime}&endTime=${this.dataForm.endTime}&invoiceType=${this.dataForm.invoiceType}`)
      },
      // 删除
      deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/generator/shoppingorderform/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      // 通知供应商发货
      notifySupplier (id) {
        this.$http({
          url: this.$http.adornUrl(`/shopping/order/notifySupplier/${id}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message.success('操作成功')
            this.getDataList ()
          } else {
            this.$message.error(data.msg)
          }
        })
      }
    }
  }
</script>
